<template>
  <el-container class="home-container">
    <Header @changemenucollapse="changeMenuCollapse" />
    <el-container>
      <Aside :menuCollapse="menuCollapse" />
      <el-container>
        <el-main>
          <!-- 面包屑 -->
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <!-- <el-breadcrumb-item :to="{ path: '/ums' }">{{
                $route.matched[0].meta.title
              }}</el-breadcrumb-item>
              <el-breadcrumb-item>{{
                $route.matched[1].meta.title
              }}</el-breadcrumb-item> -->
              <el-breadcrumb-item
                v-for="item in breadcrumb"
                :key="item.path"
                :to="{ path: item.path }"
                >{{ item.meta.title }}</el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
          <div class="router-container">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
 
<script>
import Header from './components/Header.vue'
import Aside from './components/Aside.vue'
export default {
  components: {
    Header, Aside
  },
  data() {
    return {
      menuCollapse: false,
      breadcrumb: []
    }
  },
  methods: {
    changeMenuCollapse() {
      this.menuCollapse = !this.menuCollapse
    },
    makeBreadcrumb() {
      // 如果当前是首页
      if (this.$route.path === '/index') {
        this.breadcrumb = []
      } else {
        this.breadcrumb = this.$route.matched
      }
    }
  },
  created() {
    this.makeBreadcrumb()
  },
  watch: {
    "$route.path"() {
      // 直接取出路由里面的多级 匹配规则，通过遍历生成多级面包屑
      this.makeBreadcrumb()
    }
  }
}
</script>
 
<style lang = "less" scoped>
.home-container {
  flex-direction: column;
}
.el-main {
  padding: 0;
}
.breadcrumb {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.router-container {
  padding: 20px;
  overflow-x: visible;
  overflow-y: auto;
  height: calc(100vh - 180px);
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>